<template>
  <div>
    <!-- 修改投资用户资料页面 -->
    <el-card>
      <el-row :gutter="24">
        <br />
        <h3>基本信息</h3>
        <br />
        <el-col :span="12">
          <div>手机号：{{ ruleForm.phone }}</div>
          <br />
          <div>身份证号：{{ ruleForm.idNum }}</div>
        </el-col>
        <el-col :span="12">
          <div>真实姓名：{{ ruleForm.name }}</div>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="24">
        <br />
        <h3>银行卡信息</h3>
        <br />
        <el-col :span="12">
          <div>银行名称：{{ ruleForm.bankCard.name }}</div>
          <br />
          <div>银行卡号：{{ ruleForm.bankCard.bankCard }}</div>
        </el-col>
        <el-col :span="12">
          <div>支行名称：{{ ruleForm.bankCard.branchName }}</div>
        </el-col>
      </el-row>
      <br />
      <h3>操作</h3>
      <br />
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="状态:" required>
          <el-radio-group v-model="ruleForm.lockStatus">
            <el-radio label="正常"></el-radio>
            <el-radio label="锁定"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存修改</el-button
          >
          <el-button @click="go">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import TableComponent from '../../components/basic/TableComponent.vue';
import { getUserDetails,updateInvestUserById } from "../../http/member";


export default {
  name: "Member3",
  data() {
    return {
      ruleForm: this.getInitRoleForm(),
      tableData: {},
      id: "",
      rules: {
        lockStatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      updateInvestUserById(this.id,{
        remarks: this.ruleForm.remarks,
        lockStatus: this.ruleForm.lockStatus
      })
      .then(res => { //获取返回值
          this.$message({
          message: '修改成功！',
          type: 'success'
          });
          console.log(res);
        })
        .catch(err => {
          console.log(err);
          return false;
        })
    },
    go() {
      //返回投资用户
      this.$router.back();
      console.log(2345);
    },
  },
  beforeMount() {
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    //获取数据
    getUserDetails(this.id)
      .then((res) => {
        if (res.data.code == 20000) {
          this.tableData = res.data.data.result; //表格数据
          this.ruleForm = this.getInitRoleForm();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  beforeCreate() {
    const defaultData = {
      phone: "",
      name: "",
      idNum: "", //身份证
      lockStatus: "正常",
      remarks: "",
      bankCard: {
        //银行卡信息
        name: "",
        bankCard: "",
        branchName: "",
      },
    };

    this.getInitRoleForm = function () {
      if (this._.isEmpty(this.tableData)) return defaultData;
      let obj = this._.cloneDeep(defaultData),
        formCopy = this._.cloneDeep(this.tableData);
        console.log(formCopy);
      for (let key in defaultData) {
        obj[key] = formCopy[key];
      }
      obj.bankCard = defaultData.bankCard;
      if (formCopy.userdetailList.length) {
        for (let key in defaultData.bankCard) {
          obj.bankCard[key] = formCopy.userdetailList[0][key];
        }
      }
      return obj;
    };
  },
};
</script>

<style scoped>
</style>